﻿@using Discussion.Core.Models
@using Discussion.Core.Utilities
@using Discussion.Web.Services.UserManagement.Avatar
@inject IAvatarUrlService AvatarUrlService
@inject SiteSettings SiteSettings
@model User
@{
    Layout = "_UserLayout.cshtml";
    ViewData["Title"] = "基本信息";
}



<h3>基本信息</h3>

<form asp-action="DoSettings" method="post">
    <div asp-validation-summary="All" class="text-danger"></div>
    <fieldset class="form-group">
        <label>
            用户名
        </label>
        <div>@Model.UserName.ToPreferredUserName()</div>
    </fieldset>
    <fieldset>
        <div class="user-avatar-wrapper">
            <div class="inner-square">
                <img src="@AvatarUrlService.GetAvatarUrl(Model)" title="点击更改头像" class="user-avatar"/>
            </div>
            <span class="avatar-note">点击更改头像，请使用 240x240 方形图片</span>

        </div>
        <div>
            @Html.HiddenFor(model => model.AvatarFileId)
        </div>
    </fieldset>
    <fieldset class="form-group">
        <label asp-for="DisplayName">
            显示名称
        </label>
        <div>
            @Html.TextBoxFor(model => model.DisplayName, new {autofocus=true, @class = "form-control", minlength = 3, maxlength = 20})
        </div>
    </fieldset>
    <fieldset class="form-group">
        <label asp-for="EmailAddress">
            邮件地址
        </label>
        <div>
            @Html.TextBoxFor(model => model.EmailAddress, new {type = "email", @class = "form-control", minlength = 3, maxlength = 40})
            @if (!string.IsNullOrEmpty(Model.EmailAddress))
            {
                <i rel="confirmation" data-status="send" title="@(Model.EmailAddressConfirmed ? "已验证" : "未验证")"
                   class="confirmation-operation glyphicon @(Model.EmailAddressConfirmed ? "glyphicon-ok" : "glyphicon-warning-sign")"></i>
                if (!Model.EmailAddressConfirmed)
                {
                    <div rel="confirmation" class="confirm-palette">
                        <a data-status="send" class="confirmation-operation link">现在验证</a>
                        <a data-status="re-send" class="confirmation-operation link">再次发送验证邮件</a>
                        <span data-status="sending" class="confirmation-operation">正在发送验证邮件</span>
                        <span data-status="sent" class="confirmation-operation">
                            验证邮件已发出，<span data-status="sent-1">请查收邮件完成验证</span><span data-status="sent-2" class="countdown"></span><span data-status="sent-2"> 秒后可再次发送</span>
                        </span>
                        <span data-status="error" class="confirmation-operation">无法发送验证邮件，请稍后再试</span>
                    </div>
                }
            }
        </div>
    </fieldset>
    <button type="submit" class="btn btn-default">保存</button>
</form>



@section Tail{
    <script>
        var sendConfirmationMailUrl = '@Url.Action("SendEmailConfirmation", "User")';
        var uploadAvatarUrl = '@Url.Action("UploadFile", "Common", new {category = "avatar"})';
        $(function() {
            var avatarUploadSelectors = {
                avatarImage: '.user-avatar',
                avatarNote: '.avatar-note',
                inputField: '#@(nameof(Model.AvatarFileId))'
            };
            var userModule = window.DiscussionApp.user;


            userModule.email.setupEditEmailAddress('@Model.EmailAddress', sendConfirmationMailUrl);
            userModule.avatar.setupUploadAvatar(avatarUploadSelectors, uploadAvatarUrl);
        });
    </script>
}
